<template>
<div class="relative component-item" @click.stop="activeItem">
    <component
        :is="currentItem.render"
        :current-item="currentItem"
        :validators="validators"
        :propsAttrs="propsAttrs"
        :formAttr="formAttr"
    ></component>
<!--  <slot :current-item="currentItem">-->
<!--    <div class="w-full bg-blue-500">-->
<!--      {{currentItem}}-->
<!--    </div>-->
<!--  </slot>-->
    <span class="absolute -top-3 right-10 cursor-pointer drawing-item  drawing-item-copy" title="复制" @click.stop="copyItem" >复制</span>
    <span class="absolute -top-3 right-1 cursor-pointer  drawing-item drawing-item-delete" title="删除"  @click.stop="deleteItem">删除</span>
</div>
</template>

<script>
export default {
  name: "common-render",
  props: {
    activeId: {
      type: Number
    },
    currentItem: {
      type: Object
    },
    index:{
      type:Number
    }
  },
  computed: {
    formAttr() {
      const attr = {};
      Object.keys(this.currentItem.__config__).forEach(key => {
        if (this.currentItem.__config__[key].value) {
          attr[key] = this.currentItem.__config__[key].value
        }

      })
      return attr;
    },
    propsAttrs() {
      const attr = {};
      Object.keys(this.currentItem.__field_props__).forEach(key => {
        if (this.currentItem.__field_props__[key].value) {
          attr[key] = this.currentItem.__field_props__[key].value
        }
      })
      return attr;
    },
    validators() {
      return this.currentItem.validators;
    }
  },
  methods:{
    activeItem(){
      this.$emit("activeItem",this.currentItem)
    },
    copyItem(){
      this.$emit('copyItem',{item:this.currentItem})
    },
    deleteItem(){
      this.$emit('deleteItem',{index:this.index,item:this.currentItem})
    },
  }
}
</script>

<style scoped>
.drawing-item{
  opacity: 0;
  transition: all 0.15s;
}
.component-item:hover .drawing-item{
  opacity: 1;
}
</style>
